<template>
  <div class="tab-bar">
    <toast ref="toast"/>
    <div class="left" >
      <div class="left-item" @click="to_uindex">
        <img src="../../../assets/img/Mall/icon/卖家.svg" alt="">
        <div>卖家</div>
      </div>
      <div class="left-item" @click="handleCollect">
        <img v-if="isCollect" src="../../../assets/img/Mall/icon/已收藏.svg" alt="">
        <img v-else src="../../../assets/img/Mall/icon/未收藏.svg" alt="" >
        <div>收藏</div>
      </div>
    </div>
    <div class="right">
      <div class="r-item">
        <div class="add-car" @click="addCart">加入购物车</div>
        <div class="buy">立即购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import Toast from '../../../components/Toast/Toast.vue';
export default {
  components: { Toast },
  name: "",
  props:{
   user:{
    type:Object,
    default(){
     return {}
    }
   },
   content:{
     type:Object,
     default(){
       return {}
     }
   }
  },
  data() {
    return {};
  },
  computed:{
    _id(){
      return this.$store.getters.user._id
    },
    isCollect(){
      return this.content.collections ? this.content.collections.filter(item=>item==this._id).length:0
    }
  },
  mounted(){
    console.log(this.content)
  },  
  methods: {
    addCart(){//加入购物车
      this.$emit('addCart')
    },
    handleCollect(){//处理收藏
    if(this.isCollect){
      // console.log('取消收藏')
      let d = this.content.collections.indexOf(this._id)
      this.content.collections.splice(d,1)
      let msg = '取消收藏'
      let color = 'Cyan'
      this.$refs.toast.show(msg,color)
    }else{
      this.content.collections.push(this._id)
      let msg = '收藏成功'
      let color = 'Cyan'
      this.$refs.toast.show(msg,color)
    }
    this.$emit('handleCollect')
    },
    to_uindex(){//联系卖家
      let uid = this.user.uid
      this.$router.push("/uindex/" + uid)
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tab-bar {
  padding-top: 5px;
  border-top: #999 solid 1px;
  height: 60px;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 3;
}

.left{
  text-align: center;
  flex: 40%;
  display: flex;
}
.left-item{
  font-size: 12px;
  margin-left: 20px;
}
.left-item img {
  width: 24px;
  height: 24px;
}
.right{
  flex: 60%;
  
}
.r-item{
  margin: 0 auto;
  width: 200px;
  height: 45px;
  border: 1px solid #333;
  border-radius: 30px;
  display: flex;
  overflow: hidden;
}
.r-item div{
  line-height: 45px;
  flex: 1;
  text-align: center;
}
.add-car{
  background-color: orange;
  color: white;
}
.buy{
  background-color: orangered;
  color: white;
}
</style>
